<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>24 本科 3 班 康建辉 的网站！</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .register-container {
            max-width: 600px;
            margin: 30px auto;
            padding: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        }

        .info {
            color: lightblue;
            font-size: 0.9rem;
        }

        .error {
            color: red;
            font-size: 0.9rem;
        }

        .password-strength {
            height: 4px;
            margin-top: 5px;
            background-color: #e9ecef;
            border-radius: 2px;
            overflow: hidden;
        }

        .password-strength-bar {
            height: 100%;
            width: 0%;
            transition: width 0.3s ease;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="register-container">
            <img src="./img/校徽and名字.png" alt="山河大学校徽" style="display: block; margin: 0 auto 20px; width: 250px;">
            <h2 style="text-align: center; margin-bottom: 25px;">用户注册</h2>

            <form id="registerForm">
                <!-- 用户名 -->
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="4-16位字母或数字">
                    <span class="usernameInfo info"></span>
                </div>

                <!-- 密码 -->
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="8-14位，包含字母和数字">
                    <div class="password-strength">
                        <div class="password-strength-bar" id="passwordStrength"></div>
                    </div>
                    <span class="passwordInfo info"></span>
                </div>

                <!-- 确认密码 -->
                <div class="mb-3">
                    <label for="confirmPassword" class="form-label">确认密码</label>
                    <input type="password" class="form-control" id="confirmPassword" placeholder="再次输入密码">
                    <span class="confirmPasswordInfo info"></span>
                </div>

                <!-- 用户协议 -->
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="agreeTerms">
                    <label class="form-check-label" for="agreeTerms">
                        我已阅读并同意<a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">《用户协议》</a>
                    </label>
                    <span class="termsInfo error"></span>
                </div>

                <!-- 提交按钮 -->
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary" style="height: 45px;">注册</button>
                </div>

                <div class="mt-3 text-center">
                    <span>已有账号？<a href="login.html">立即登录</a></span>
                </div>

                <span class="formInfo info"></span>
            </form>
        </div>
    </div>

    <!-- 用户协议模态框 -->
    <div class="modal fade" id="termsModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户协议</h5>
                </div>
                <div class="modal-body">
                    <h6>1. 服务条款的确认和接纳</h6>
                    <p>用户必须完全同意所有服务条款并完成注册程序，才能成为本站的正式用户。</p>
                    <h6>2. 服务简介</h6>
                    <p>本站运用自己的操作系统通过国际互联网络为用户提供网络服务。</p>
                    <h6>3. 用户的账号、密码和安全性</h6>
                    <p>用户一旦注册成功，成为本站的合法用户，将得到一个密码和用户名。</p>
                    <h6>4. 用户隐私制度</h6>
                    <p>尊重用户个人隐私是本站的一项基本政策。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="agreeModalTerms">同意协议</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 获取DOM元素
        const username = document.getElementById('username');
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('confirmPassword');
        const agreeTerms = document.getElementById('agreeTerms');
        const form = document.getElementById('registerForm');

        // 用户名验证
        username.addEventListener('blur', checkUsername);
        function checkUsername() {
            const pattern = /^[a-zA-Z0-9]{4,16}$/;
            const info = document.querySelector('.usernameInfo');

            if (pattern.test(this.value)) {
                info.textContent = "用户名可用";
                info.className = "usernameInfo info";
                return true;
            } else {
                info.textContent = "用户名需4-16位字母或数字";
                info.className = "usernameInfo error";
                this.focus();
                return false;
            }
        }

        // 密码验证
        password.addEventListener('blur', checkPassword);
        function checkPassword() {
            const pattern = /^(?=.*[A-Za-z])(?=.*\d).{8,14}$/;
            const info = document.querySelector('.passwordInfo');

            if (pattern.test(this.value)) {
                info.textContent = "密码符合要求";
                info.className = "passwordInfo info";
                return true;
            } else {
                info.textContent = "密码需8-14位且包含字母和数字";
                info.className = "passwordInfo error";
                this.focus();
                return false;
            }
        }

        // 密码强度检测
        password.addEventListener('input', function () {
            const strengthBar = document.getElementById('passwordStrength');
            const pwd = this.value;
            let strength = 0;

            if (pwd.length > 0) strength += 20;
            if (pwd.length >= 8) strength += 20;
            if (/[A-Z]/.test(pwd)) strength += 20;
            if (/[0-9]/.test(pwd)) strength += 20;
            if (/[^A-Za-z0-9]/.test(pwd)) strength += 20;

            strengthBar.style.width = strength + '%';

            if (strength < 40) {
                strengthBar.style.backgroundColor = '#dc3545';
            } else if (strength < 80) {
                strengthBar.style.backgroundColor = '#ffc107';
            } else {
                strengthBar.style.backgroundColor = '#28a745';
            }
        });

        // 确认密码验证
        confirmPassword.addEventListener('blur', checkConfirmPassword);
        function checkConfirmPassword() {
            const info = document.querySelector('.confirmPasswordInfo');

            if (this.value === password.value) {
                info.textContent = "密码匹配";
                info.className = "confirmPasswordInfo info";
                return true;
            } else {
                info.textContent = "两次密码不一致";
                info.className = "confirmPasswordInfo error";
                this.focus();
                return false;
            }
        }

        // 模态框同意按钮
        document.getElementById('agreeModalTerms').addEventListener('click', function () {
            agreeTerms.checked = true;
            const modal = bootstrap.Modal.getInstance(document.getElementById('termsModal'));
            modal.hide();
            document.querySelector('.termsInfo').textContent = "";
        });

        // 表单提交
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const formInfo = document.querySelector('.formInfo');
            const termsInfo = document.querySelector('.termsInfo');

            const usernameValid = checkUsername.call(username);
            const passwordValid = checkPassword.call(password);
            const confirmValid = checkConfirmPassword.call(confirmPassword);

            if (!agreeTerms.checked) {
                termsInfo.textContent = "请同意用户协议";
                termsInfo.className = "termsInfo error";
            } else {
                termsInfo.textContent = "";
            }

            if (usernameValid && passwordValid && confirmValid && agreeTerms.checked) {
                formInfo.textContent = "注册成功！";
                formInfo.className = "formInfo info";
                // 这里可以添加表单提交逻辑
            } else {
                formInfo.textContent = "请检查输入信息";
                formInfo.className = "formInfo error";
            }
        });
    </script>
</body>

</html>